<template>
	<div class="center_main">
		<div class="center_left hiddenScroll">
			<div class="center_usericon">
				<img :src="baseurl + userinfo.headPortraitUrl" v-if="userinfo.headPortraitUrl" />
				<img src="@/images/1.png" v-else/>
			</div>
			<div class="center_userP1">
				{{userinfo.studentName}}
			</div>
			<div class="center_userP2">
				<el-button type='primary' size='small' @click='openEditIcon'>更换头像</el-button>
			</div>
			<div class="center_userP3" @click="toTab('user')" :class="{'active':activeTab == 'user'}">个人信息</div>
			<div class="center_userP3" @click="toTab('exam')" :class="{'active':activeTab == 'exam'}">考试成绩</div>
			<div class="center_userP3" @click="toTab('cases')" :class="{'active':activeTab == 'cases'}">影像报告</div>
			<div class="center_userP3" @click="toTab('browses')" :class="{'active':activeTab == 'browses'}">浏览记录</div>
			<div class="center_userP3" @click="toTab('collects')" :class="{'active':activeTab == 'collects'}">我的收藏</div>
		</div>
		<user v-if="activeTab == 'user'"></user>
		<exam v-if="activeTab == 'exam'"></exam>
		<cases v-if="activeTab == 'cases'"></cases>
		<browses v-if="activeTab == 'browses'"></browses>
		<collects v-if="activeTab == 'collects'"></collects>

		<div class="index_mask" v-if='editing'>
			<div class="icon_cont">
				<el-form :model="addForm" :rules="rules" ref="addForm">
					<el-form-item prop="headPortraitUrl">
						<div class="icon_cont_left">
							<img :src='baseurl + addForm.headPortraitUrl' v-if='addForm.headPortraitUrl' />
						</div>
						<div class="icon_cont_right">
							<div class="icon_cont_rightP1">
								<el-button @click="$refs.user_headPortraitUrl_add.click()" size='small' type='primary'>选择图片</el-button>
								<input ref="user_headPortraitUrl_add" type="file" accept=".jpg, .png, .JPG, .PNG" style="display: none" @change="handleFileUpload($event)" />
							</div>
							<div class="icon_cont_rightP2">
								支持jpg、png格式图片，大小不超过5M
							</div>
						</div>
					</el-form-item>
				</el-form>
				<div class="icon_contbtns">
					<el-button @click="resetForm()" size='small'>取消</el-button>
					<el-button type='primary' @click="submitForm()" size='small'>保存</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { removeStorageToken } from '@/utils/auth'
	import { selectStudentDetail, updateHeadPortrait } from "@/api/center.js"
	import { putProgress } from "@/utils/oss.js"
	import user from '@/views/center/user.vue'
	import exam from '@/views/center/exam.vue'
	import cases from '@/views/center/cases.vue'
	import browses from '@/views/center/browses.vue'
	import collects from '@/views/center/collects.vue'
	export default {
		components: {
			user,
			exam,
			cases,
			browses,
			collects
		},
		data() {
			var validatorphone = (rule, value, cadd_backimg) => {
				let reg = /^1[3456789]\d{9}$/;
				if(!reg.test(value)) {
					cadd_backimg(new Error('请输入正确的手机号码'))
				} else {
					cadd_backimg()
				}
			};
			return {
				userinfo: {},
				activeTab: '',

				editing: false,
				addForm: {
					headPortraitUrl: '',
				},
				rules: {
					headPortraitUrl: [{
						required: true,
						message: '请上传图片',
						trigger: 'blur'
					}],
				},
			}
		},
		created() {
			if(this.$route.query.activeTab) {
				this.activeTab = this.$route.query.activeTab
			} else {
				this.activeTab = 'user'
			}
			this.getinfo()
		},
		watch: {
			$route() {
				if(this.$route.query.activeTab) {
					this.activeTab = this.$route.query.activeTab
				} else {
					this.activeTab = 'user'
				}
			},
		},
		mounted() {

		},
		methods: {
			toTab(activeTab) {
				this.$router.replace({
					name: 'redirect',
					query: {
						name: 'center',
						query: JSON.stringify({
							activeTab
						})
					}
				})
			},
			openEditIcon() {
				this.addForm.headPortraitUrl = this.userinfo.headPortraitUrl;
				this.editing = true;
			},
			handleFileUpload(option) {
				const files = event.target.files;
				if(!files || files.length <= 0) {
					return;
				}
				const file = files[0];
				console.log(file)
				if(5 * 1024 * 1024 < file.size) {
					this.$message({
						type: 'error',
						message: '图片文件过大!'
					})
					return;
				}
				const key = `yxzdsw/stuIcon/${file.name}`;
				putProgress(key, file).then(res => {
					var value = ''
					if(res && res.data && res.data.code == 200) {
						value = res.data.data
					} else {
						value = key;
					}
					this.$set(this.addForm, 'headPortraitUrl', value);
					this.$refs.user_headPortraitUrl_add.value = ''
				});
			},
			submitForm() {
				this.$refs.addForm.validate((valid) => {
					if(valid) {
						var data = {
							headPortraitUrl: this.addForm.headPortraitUrl,
						}
						updateHeadPortrait(data).then(res => {
							if(res.code == '200') {
								this.$alert('修改成功！', '提示', {
									confirmButtonText: '确定',
									type: 'warning'
								}).then(() => {
									location.reload()
								}).catch(() => {
									location.reload()
								})
							} else {
								this.$message({
									type: "error",
									message: res.message
								})
							}
						})
					}
				});
			},
			resetForm() {
				this.$refs.addForm.resetFields();
				this.$refs.addForm.clearValidate()
				this.editing = false;
			},
			getinfo() {
				selectStudentDetail().then(res => {
					if(res.code == '200') {
						this.userinfo = res.data;
					}
				})
			},
			tologout() {
				removeStorageToken();
				location.reload()
			},
			changeTab(activeTab) {
				if(this.activeTab != activeTab) {
					this.activeTab = activeTab
				}
			},
		},
	}
</script>